<template>
	<view class="business">
		<view class="null_box" v-if="!detail.is_yiqianyue && !detail.is_jieyuezhong && !detail.is_qianyuezhong">
			<view class="notice" v-if="detail.is_jieyue">
				<u-icon name="info-circle-fill" color="#C49000" :size="30"></u-icon>
				<view class="notice_box">
					<u-notice-bar :volume-icon="false" :list="notice" color="#C49000"></u-notice-bar>
				</view>
			</view>
			<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/business/business_bankPage.png" text="暂无入驻商家"
				:width="163" :height="160"></blankPage>
			<view class="btn" @click="$util.toUrl('/technician/business/list')">入住商家</view>
		</view>

		<view class="detail" v-else>
			<view class="card" @click="openPopup(detail.id)">
				<view class="info flex_r_between">
					<view class="name">
						<view class="left">
							<image :src="detail.logo.image" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="view">{{detail.store_name}}</view>
							<text class="text">运营中</text>
						</view>
					</view>

					<view class="status" v-if="detail.is_qianyuezhong">审核中</view>
					<view class="status" v-if="detail.is_jieyuezhong" style="color: red;">解约中</view>
				</view>

				<view class="tag flex_r_between">
					<view class="item dark flex_r_between" v-if="detail.is_qianyuezhong">
						<image src="/static/technician/remove.png"></image>
						<text>与商家解约</text>
					</view>
					<view class="item flex_r_between" v-else @click.stop="toRemove">
						<image src="/static/technician/remove.png"></image>
						<text>与商家解约</text>
					</view>
					<view class="item flex_r_between" @click.stop="toCall">
						<image src="/static/technician/call.png"></image>
						<text>联系商家</text>
					</view>
				</view>
			</view>
		</view>

		<u-modal v-model="show" @confirm="confirm" ref="uModal" :async-close="true" title="与商家解约" show-cancel-button
			confirm-text="确认解约" confirm-color="#2779FF" cancel-color="#2779FF" cancel-text="再想想">
			<view class="slot-content">
				<view class="modal">
					<view>解约后您将不再能操作该店铺内的相关订单，确定与“{{detail.store_name}}”解约吗?</view>
					<textarea placeholder="请填写解约原因" v-model="reason"></textarea>
				</view>
			</view>
		</u-modal>

		<store ref="popup"></store>

	</view>
</template>

<script>
	import store from '@/components/store/store.vue'
	export default {
		data() {
			return {
				notice: [],
				detail: '1',

				show: false,

				reason: '',
			}
		},
		components:{
			store
		},
		methods: {
			openPopup(e){
				this.$refs.popup.open(e)
			},
			toRemove() {
				this.show = true
			},
			confirm() {
				this.request.httpTokenRequest({
					url: "/store.store/applySecureStore",
					method: "POST"
				}, {
					remark: this.reason
				}).then(res => {
					this.$util.msg(res.msg)
					if (res.code == 0) {
						this.getDetail()
					} else {
						return
					}
				}, error => {})
				this.show = false
			},
			getDetail() {
				this.request.httpTokenRequest({
					url: "store.store/getSignStoreInfo",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						this.detail = res.data
						this.notice = [`${res.data.store_name}商家解约成功，请添加新的商家！`]
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			toCall() {
				this.$util.makeCall(this.detail.mobile)
			},
			preview() {
				uni.previewImage({
					urls: [this.detail.yyzz.image]
				})
			},
		},
		onLoad() {},
		onShow() {
			this.getDetail()
		}
	}
</script>

<style scoped lang="less">
	.notice {
		background: rgba(247, 181, 0, 0.1);
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.notice_box {
			flex: 1;
		}
	}

	.btn {
		width: 400rpx;
		height: 68rpx;
		background: #2E7EFA;
		border-radius: 44rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		margin: 60rpx auto 0;
	}

	.detail {
		padding: 25rpx 30rpx;

		.card {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 36rpx 30rpx 30rpx;

			.info {
				margin-bottom: 30rpx;

				.name {
					display: flex;

					.left {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						overflow: hidden;
						margin-right: 23rpx;

						image {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.right {
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;



						.view {
							font-size: 34rpx;
							font-weight: 600;
							color: #000000;
							line-height: 48rpx;
						}

						.text {
							width: 89rpx;
							height: 41rpx;
							line-height: 41rpx;
							text-align: center;
							background: #E3FBEB;
							border-radius: 10rpx;
							font-size: 22rpx;
							color: #549662;
						}
					}
				}

				.status {
					height: 120rpx;
					font-size: 26rpx;
					color: #FFA126;
					line-height: 37rpx;
				}
			}

			.tag {
				.item {
					width: 300rpx;
					height: 114rpx;
					background: #F0F4FF;
					border-radius: 14rpx;
					padding: 26rpx 39rpx 26rpx 34rpx;

					image {
						width: 62rpx;
						height: 62rpx;

					}

					text {
						font-size: 28rpx;
						color: #2779FF;
						line-height: 40rpx;
					}
				}
			}
		}
	}

	.modal {
		padding: 30rpx 32rpx;

		view {
			margin-bottom: 30rpx;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
		}

		textarea {
			width: 504rpx;
			height: 110rpx;
			background: #F2F4F6;
			border-radius: 14rpx;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #333333;
		}
	}
</style>